<template>
  <view class="n-home-page bg-bgf6" :style="{ paddingTop: h + 44 + 'px' }">
    <view class="myfix">
      <wTitleBar
        :bgColor="addBackground"
        :isReturn="false"
        :goHome="false"
        :isMain="false"
        :returnColor="1"
        title="要速联WIFI"
        fixed="none"
      ></wTitleBar>
    </view>
    <view class="main-center">
      <view class="top">
        <text class="mtext">要速联WIFI</text>
        <text class="mtext">零投资.零风险.每次链接都</text>
        <text class="mtext">有收益</text>
        <text class="mtext1">全网招募团长.市场拓展员.拿下一座城.躺赚一辈子</text>
      </view>

      <view class="notice">
        <view class="newl">
          <image class="nimg"
                 src="https://staticcdn.youliao.com/static/image/www_m/temp/bcc80c4d-6dc0-4e4b-ad23-8e36957585a9.png"></image>
          <text class="ntxt">及时消息</text>
        </view>
        <view class="newr">
          <swiper style="height: 38px" :indicator-dots="false" :vertical="true" :autoplay="true" circular
                  interval="3000" duration="1000" class="rsw">
            <swiper-item class="flex-l" v-for="(item, index) in messageList" :key="index">
              <text class="break-text">
                {{ item.messageContent }}
              </text>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view class="btn-root">
        <view class="c-btn">
          <img src="../../static/img/btn1.png" @tap="gotoCreateWifi" />
          <img src="../../static/img/btn2.png" />
        </view>
      </view>
<!--      <view class="banners p-relative" v-if="bannerList.length > 0">
        <uni-swiper-dot :info="bannerList" :current="current1" field="content" mode="round" :dotsStyles="dotsStyles1">
          <swiper @change="fSwiper($event, 1)" class="swiper_box" :autoplay="true" circular interval="3000"
                  duration="1000" :vertical="false">
            <swiper-item v-for="(item, index) in bannerList" :key="index">
              <image style="width: 100%; height: 170px" :src="baseImgUrl + item.bannerImgUrl" />
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>-->
      <view class="other">
        <view style="display: flex; border-bottom: 1px solid #f3f3f3">
          <text class="otx">|</text>
          <text class="otx" style="margin-top: 1px; margin-left: 2px">更多功能</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import wTitleBar from "@/components/w-titleBar/w-titleBar.vue";
import common from "@/api/common";
import globalConfig from "@/utils/config.js";

export default {
  components: {
    wTitleBar
  },
  data() {
    return {
      h: uni.getSystemInfoSync().statusBarHeight, // 手机状态栏的高度
      addBackground: "#366bf9",
      bannerList: [],
      messageList: [],
      current1: 0,
      current2: 0,
      current3: 0,
      baseImgUrl: globalConfig.imageUrl,
      notification: {}, // 顶部最新通知
      dotsStyles1: { selectedBackgroundColor: "#fff", bottom: 6 }
    };
  },

  mounted() {
    this.initData();
  },
  async onShow() {
    this.setTabBarIndex(0); // 自定义tabbar下标
  },
  onLoad(options) {
    if (options.q) {
      const queryAll = decodeURIComponent(options.q);
      const wifissid = this.gup("wifissid", queryAll);
      const wifipassword = this.gup("wifipassword", queryAll);
      this.connectWifi(wifissid, wifipassword);
    }
  },

  /*  onPageScroll(e) {
     this.pageScroll = e;
     let opacity = 0;
     if (e.scrollTop >= 0) {
       opacity = e.scrollTop / 250;
     } else if (e.scrollTop >= 250) {
       opacity = 1;
     }
     const str = `rgba(60,154,252,${opacity})`;
     this.addBackground = str;
   }, */
  methods: {
    // 轮播自动转换
    fSwiper(e, num) {
      if (num === 1) this.current1 = e.detail.current;
      if (num === 2) this.current2 = e.detail.current;
      if (num === 3) this.current3 = e.detail.current;
    },
    gup(name, url) {
      if (!url) url = location.href;
      name = name.replace(/\[/, "\\[").replace(/\]/, "\\]");
      const regexS = `[\\?&]${name}=([^&#]*)`;
      const regex = new RegExp(regexS);
      const results = regex.exec(url);
      return results === null ? null : results[1];
    },

    async initData() {
      const mMessageList = await common.getNoticeMessage({ pageNo: 1, pageSize: 20 });
      this.messageList = mMessageList.rows;
  /*     const mBannerList = await common.getBannerList();
      mBannerList.rows.forEach((item) => {
        if (item.bannerStatus === "0") {
          this.bannerList.push(item);
        }
      }); */
    },

    connectWifi(wifissid, wifipassword) {
      const that = this;
      // 检测手机型号
      wx.getSystemInfo({
        success(res) {
          let system = "";
          if (res.platform === "android") system = parseInt(res.system.substr(8), 10);
          if (res.platform === "ios") system = parseInt(res.system.substr(4), 10);
          if (res.platform === "android" && system < 6) {
            wx.showToast({
              title: "手机版本不支持"
            });
            return;
          }
          if (res.platform === "ios" && system < 11.2) {
            wx.showToast({
              title: "手机版本不支持"
            });
            return;
          }
          // 2.初始化 Wi-Fi 模块
          that.startWifi(wifissid, wifipassword);
        }
      });
    },

    startWifi(wifissid, wifipassword) {

      console.log("开始初始化");
      const that = this;
      wx.startWifi({
        success() {
          // 请求成功连接Wifi
          console.log("请求成功");
          that.connected(wifissid, wifipassword);
        },
        fail(res) {
          wx.showToast({
            title: "接口调用失败"
          });
        }
      });
    },
    connected(wifissid, wifipassword) {
      wx.connectWifi({
        SSID: wifissid,
        BSSID: "",
        password: wifipassword,
        success(res) {
          wx.showToast({
            title: "wifi连接成功"
          });
        },
        fail(res) {
          wx.showToast({
            title: "wifi连接失败"
          });
        }
      });
    },
    gotoCreateWifi() {
      const url = "/pages-wifi/addWifi";
      uni.navigateTo({ url });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../static/newCommon.scss";

.n-home-page {
  width: 100%;
  margin-bottom: 53px;

  .main-center {
    z-index: 99;
    background-color: #f4f4f4;

    .mt16 {
      @extend .mt-16;
    }

    .top {
      display: flex;
      flex-direction: column;
      background-color: #366bf9;
      padding-bottom: 5px;
    }

    .mtext {
      font-weight: bold;
      color: white;
      margin-left: 50px;
      font-size: 22px;
    }

    .mtext1 {
      color: white;

      margin-top: 5px;
      margin-left: 50px;
      font-size: 12px;
    }

    .notice {
      display: flex;

      width: 100%;
      padding-left: 10px;
      align-items: center;
      background-color: white;
      height: 40px;

      .newl {
        display: flex;

        .nimg {
          width: 16px;
          height: 16px;
        }

        .ntxt {
          @extend .ml-8;
          @extend .mr-10;
          font-weight: bold;
        }
      }

      .newr {
        @extend .flex-grow;
        @extend .c-c91;
        display: flex;
        align-items: center;

        .rsw {
          @extend .flex-grow;
        }
      }
    }

    .btn-root {
      padding-left: 10px;
      padding-right: 10px;
      margin-top: 15px;

      .c-btn {
        display: flex;
        justify-content: space-between;

        img {
          padding-right: 5px;
          padding-left: 5px;
          height: 60px;
        }
      }
    }

    // 轮播
    .banners {
      @extend .mt-10;

      .swiper_box {
        height: 170px;
      }
    }

    .p-relative {
      position: relative;
    }

    .other {
      @extend .mt16;
      margin: 10px 10px 0;
      background-color: #fff;
      border-radius: 4px;
      overflow-x: hidden;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 10px;
      height: 180px;
      flex-direction: column;
      display: flex;

      .otx {
        color: #3e85ff;
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 14px;
      }
    }
  }
}
</style>
